<template>
<div v-if="chartPriceList.length !== 0">
  <li class="mui-table-view-cell mui-media li-height" style="border-top: 1px solid #e9e9e9;" >
    <a class="mui-navigate-right" style="font-size:14px;">
    价格走势图
    </a>
  </li>
  <div class="mui-content-price">
    <div class="mui-content-padded">
      <div class="chart" id="lineChart">
       <!--  <div style="text-align:center;height:200px;line-height:200px;">暂无数据</div> -->
      </div>
    </div>
  </div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import {getPriceTrendBycarId} from "@/nodeApi/carDetail"
import utils from '@/utils/utils'
export default {
    components: {
    
    },
    data() {
        return {
          chartDateList:[],
          chartPriceList:[]
        }
    },
    props: {},
    watch: {
     
    },
    methods: {
      getOption(chartType) {
        var chartOption = chartType == 'pie' ? {
          calculable: false,
        } : {
          legend: {
            data: ['报价趋势']
          },
          grid: {
            x: 65,
            x2: 10,
            y: 30,
            y2: 25
          },
          toolbox: {
            show: false,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: false,
          xAxis: [{
            type: 'category',
            data: this.chartDateList
          }],
          yAxis: [{
            type: 'value',
            splitArea: {
              show: true
            }
          }],
          series: [{
            name: '报价趋势',
            type: chartType,
            data: this.chartPriceList
          }]
        };
        return chartOption;
      }
    },
    filters: {},
    computed:{
      ...mapState([
          'carDetails',
      ])
    },
    created() { 

    },
    mounted() {
      //初始化图表数据
      let that = this
      //console.log(this.carDetails.allcarModelMsg)
      getPriceTrendBycarId({'carId': this.carDetails.allcarModelMsg.currentCar.id}).then(res=>{
        
        for(let i=0;i<res.data.priceTrend.length;i++){
          this.chartDateList.push(utils.time.formatDatedd(res.data.priceTrend[i].date))
          this.chartPriceList.push(res.data.priceTrend[i].price)
        }
        this.$nextTick(function() {
          if(that.chartPriceList.length != 0){
            var byId = function(id) {
                return document.getElementById(id);
            };
            ////console.log(this.chartDateList)
            ////console.log(this.chartPriceList)
            var lineChart = echarts.init(byId('lineChart'));
            lineChart.setOption(that.getOption('line'));
          }
        })
      })
    },
    destroyed() { }
}
</script>
<style scoped>
/* mui echarts需要申明高度和宽度 */
li {
  list-style-type:none;
  background:#fff;
}
  .chart {
    height: 200px;
    margin: 0px;
    padding: 0px;
  }

  .mui-table-view-cell:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 0px!important;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: none;
  }
  .mui-content-price{
     background: #fff;
  }
  .mui-content-padded{
    background: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left:10px;
    margin-right:10px;
  }
  .mui-navigate-right:after, .mui-push-right:after {
    right: 15px;
    content: '';
  }
</style>